<template>
    <div style="padding:20px;background:#fff;">
        <Form
            ref="form"
            :label-width="120"
            :show-message="false"
            :model="form">
            <FormItem label="配置模式:"  prop="model">
                <Select v-model="form.model" style="width: 240px" @on-change="handleModelChange">
                    <Option v-for="option in roomOptions" :key="option.label" :value="option.value">
                        {{option.label}}
                    </Option>
                </Select>
                <span style="margin-left:30px;color:#888">如无独立配置需求，请选择统一配置</span>
            </FormItem>
            <FormItem label="开启预警:"  prop="enable_alarm">
                <i-switch v-model="form.enable_alarm" :disabled="isDisabled"></i-switch>
            </FormItem>
            <FormItem label="预警时长:"  prop="alarm_time">
                <Select v-model="form.alarm_time" style="width: 240px" :disabled="isDisabled">
                    <Option v-for="option in options" :key="option" :value="option">
                        {{option}}小时
                    </Option>
                </Select>
            </FormItem>
            <FormItem label="超时未锁提醒:" prop="alarm_unlock">
                <span style="display:inline-block;width: 240px">10分钟</span>
                <span style="margin-left:30px;color:#888">限指定型号门锁支持</span>
            </FormItem>
            <!-- <FormItem label="低电提醒:"  prop="low_power">
                <Select v-model="form.low_power" style="width: 240px" :disabled="isDisabled">
                    <Option v-for="option in lowPowerOptions" :key="option" :value="option">
                        {{option}}%
                    </Option>
                </Select>
            </FormItem> -->
            <FormItem label="">
                <div class="text-right" style="width: 240px;display:inline-block">
                    <i-button @click="handleSubmit" :loading="submiting">保存修改</i-button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    import pick from 'lodash/pick'
import util from '@/libs/util'
import { http, api } from '@/libs/http'

export default {
      name: 'room-lock-setting',
      props: {
        room: Object
      },
      created () {
        this.initSetting()
      },
      computed: {
        isDisabled () {
          return this.modelType && this.form.model === 'extend'
        }
      },
      data () {
        return {
          roomOptions: [ { label: '房源统一配置', value: 'extend' }, { label: '房间独立配置', value: 'self' } ],
          options: [ 24, 48, 72, 120 ],
          lowPowerOptions: [ 10, 15, 20, 30 ],
          loading: false,
          loadingTable: false,
          submiting: false,
          tableData: [],
          form: {
            model: '',
            enable_alarm: false,
            alarm_time: '',
            alarm_unlock: 10
            // low_power: ''
          },
          defaultConfig: {} // 获取的门锁默认配置
        }
      },
      methods: {
        handleModelChange (val) {
          if (val === 'extend') {
            this.form = pick(this.defaultConfig, Object.keys(this.form))
          }
        },
        async initSetting () {
          this.loading = true
          try {
            const res = await http.req(api.lock_setting, null, { type: 'room', value: this.room.roomId })
            if (!res) return
            this.defaultConfig = { ...res.defalut, ...res.parent, model: 'extend' }
            const result = util.lockSettingTranslate(res)
            this.form = pick(result, Object.keys(this.form))
          } catch (err) {
            console.log(err)
          } finally {
            this.loading = false
          }
        },
        async handleSubmit () {
          this.submiting = true
          try {
            const { msg_notify, ...rest } = this.form
            const data = {
              ...rest,
              value: this.room.roomId,
              alarm_unlock: 10,
              type: 'room'
            }
            if (msg_notify && msg_notify.length > 0) data.msg_notify = msg_notify
            const res = await http.req(api.lock_setting_update, null, data)
            if (res) {
              this.$Message.success({
                content: '更改成功，相应提醒仅在配置完成后生效',
                duration: 4
              })
              this.initSetting()
            }
          } catch (err) {
            console.log(err)
          } finally {
            this.submiting = false
          }
        }
      }
    }
</script>